<template>
  <div id="app">
    <header-app></header-app>
    <app-mask :text="loadingText" v-bind:loadingShow="loadingState"></app-mask>
    <router-view class="center" v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
  import AppMask from '@/components/AppMask/AppMask.vue';

  export default {
    data() {
      return {
        isRouterAlive: true,
        loadingText: "",
        loadingState: false,
        first: null
      };
    },
    components: {
      AppMask
    },
    provide() { //把方法传递给子组件
      return {
        reload: this.reload,
        loadingFun: this.loadingFun
      }
    },
    created() {
      let screenHeight = document.body.clientHeight;
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      if (isAndroid) {
        document.getElementsByTagName('body')[0].style.height = screenHeight + 'px';
      }
    },
    mounted() {
      const that = this;
      mui.init({
        keyEventBind: {
          backbutton: true //关闭back按键监听
        }
      });
      mui.back = function () {
        if (that.$route.meta.leftShow != undefined) {
          if (!that.first) { //处理逻辑：1秒内，连续两次按返回键，则退出应用；
            that.first = new Date().getTime(); //记录第一次按下回退键的时间
            mui.toast('再点一次退出应用');
            setTimeout(function () { //2s中后清除
              that.first = null;
            }, 2000);
          } else {
            if (new Date().getTime() - that.first < 2000) { //如果两次按下的时间小于2s，
              plus.runtime.quit(); //那么就退出app
            }
          }
        } else {
          that.$router.go(-1);
        }
      };
    },
    methods: {
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      loadingFun(state, text) { //显示加载框、 请稍后  false
        this.loadingText = text;
        this.loadingState = state;
      }
    }
  }
</script>
<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-items: center;
    width: 100%;
    height: 100%;
    .center {
      // height: 100%;
      width: 100%;
      flex: 1;
      overflow: auto;
      overflow-scrolling: touch;
      position: relative;
    }
    .center::-webkit-scrollbar {
      width: 0;
      height: 0;
      border: none;
    }
  }
</style>
